<template>
	<view class="content">
		<view class="box">
			<text>姓名:</text><input type="text" @input="messagesearch1">
		</view>
		<view class="box">
			<text>电话:</text><input type="text" @input="messagesearch2">
		</view>
		<view class="update-message">
			<view class="update-text">所在地区：</view>
			<view class="update-input">
				<input @tap="openAddres" v-model="address" />
			</view>
			<image src="../../static/右边.png" class="jt"></image>
		</view>
		<textarea class="detail" placeholder-style="color:#ccc;" placeholder="详细地址:如道路,门牌号" @input="messagesearch" />
	<!-- 	<text>{{pickerText}}</text> --><!-- 这个步骤只是为了让大家看到返回的数据 -->
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"
			themeColor='#007AFF'></simple-address>
		<button @click="bc()">保存地址</button>
	</view>
</template>

<script>
	import simpleAddress from "@/components/simple-address/simple-address.nvue"
	export default {
		data() {
			return {
				cityPickerValueDefault: [0, 0, 1], //弹框的初始值
				pickerText: '',
				address: '北京市-市辖区-西城区', //初始值
				xxdz: '',
				name: '',
				dianhua: '',
				cc: [],
				
			}
		},
		components: {
			simpleAddress
		},
		methods: {
			openAddres() {
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				this.pickerText = JSON.stringify(e); //这个步骤只是为了让大家看到返回的数据
				this.address = e.label; //把选择的地址回显到input框中
				console.log(this.address)
				// console.log(JSON.stringify(e))

			},
			bindTextAreaBlur: function(e) {
				console.log(e.detail.value)
			},
			messagesearch: function(event) {
				console.log(event.target.value)
				this.xxdz = event.target.value
				// console.log(this.xxdz);
			},
			messagesearch1: function(event) {
				console.log(event.target.value)
				this.name = event.target.value
				// console.log(this.name);
			},
			messagesearch2: function(event) {
				console.log(event.target.value)
				this.dianhua = event.target.value
				// console.log(this.name);
			},
			bc() {
				
					// this.dizi[0].address =this.address
					// this.dizi[0].name =this.name
					// this.dizi[0].xxdz =this.xxdz
					// this.dizi[0].dianhua =this.dianhua
					const value = uni.getStorageSync('dizi');
					this.cc = value
					this.cc.push({
						address: this.address,
						xxdz: this.xxdz,
						name: this.name,
						dianhua: this.dianhua
					})
					uni.setStorageSync('dizi', this.cc);
					console.log(this.cc)
					uni.showToast({
						title: '保存成功'
					});
					
					
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/wode/shdz'
						});
					}, 1000)

				






				// uni.setStorageSync('dz', this.address);
				// uni.setStorageSync('xxdz', this.xxdz);
				// console.log(this.address);
				// console.log(this.xxdz);
				// uni.showToast({
				// 	title: '保存成功'
				// });
			},

		}
	}
</script>

<style>
	.box {
		display: flex;
		align-items: center;
	}

	page {
		background-color: #f1f1f1;
	}

	/* 提示 */
	.mind {
		color: #ccc;
		font-size: 24upx;
		margin: 3%;
	}

	text {
		margin: 1%;
	}

	/* 所在地区 */
	.update-message {
		background-color: #fff;
		height: 95upx;
		line-height: 95upx;
		font-size: 32upx;
		display: flex;
		border-bottom: 2upx solid #e4e4e4;
	}

	/* 文字 */
	.update-text {
		flex: 3;
		text-align: center;
	}

	/* 右侧input框 */
	.update-input {
		flex: 7;
		display: flex;
		padding: 3.5%;
	}

	/* 箭头 */
	.jt {
		height: 30upx;
		width: 30upx;
		margin: auto;
		margin-right: 20upx;
	}

	/* 详情 */
	.detail {
		background-color: #fff;
		width: 100%;
		height: 200upx;
		padding: 2%;
	}
</style>
